<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import MAAccountManagerMenu from '@/views/manager/MA_AccountManager_menu.vue'
import MAShowInfo from '@/views/manager/MA_show_info.vue'
import MACreateAccount from '@/views/manager/MA_create_account.vue'
import MAChangeInfo from '@/views/manager/MA_change_info.vue'
import MANoticeManagement from '@/views/manager/MA-notice-management.vue'
import MAQualificationApproval from '@/views/manager/MA_qualification_approval.vue'
import MAChangePassword from '@/views/manager/MA_change_password.vue'
import MAVolunteerApproval from '@/views/manager/MA_volunteer_approval.vue'
import MAPlaceApproval from '@/views/manager/MA_place_approval.vue'

// 定义当前选中的功能页
const currentView = ref('')

// 使用路由
const router = useRouter()

// 定义按钮点击处理函数
const showView = (viewName: string) => {
  currentView.value = viewName
}

// 处理管理账号事件
const handleManageAccounts = () => {
  currentView.value = 'manageAccounts'
}

// 处理创建账号事件
const handleCreateAccount = () => {
  currentView.value = 'createAccount'
}

// 处理编辑账号事件
const handleChangeAccount = (account: any) => {
  window.accountData = account
  currentView.value = 'changeAccount'
}

// 新增：处理修改密码事件
const handleChangePassword = () => {
  currentView.value = 'changePassword'
}

// 返回账户管理菜单
const returnToAccountMenu = () => {
  currentView.value = 'view1'
}

// 返回账户管理页面
const returnToManageAccounts = () => {
  currentView.value = 'manageAccounts'
}

// 定义事件处理函数
const handleNavigateToChangeInfo = (event: Event) => {
  const customEvent = event as CustomEvent
  handleChangeAccount(customEvent.detail)
}

// 组件挂载时添加事件监听器
onMounted(() => {
  window.addEventListener('navigate-to-menu', returnToAccountMenu)
  window.addEventListener('navigate-to-change-info', handleNavigateToChangeInfo)
  window.addEventListener('navigate-to-manage-accounts', returnToManageAccounts)
})

// 在组件卸载前移除事件监听器
onUnmounted(() => {
  window.removeEventListener('navigate-to-menu', returnToAccountMenu)
  window.removeEventListener('navigate-to-change-info', handleNavigateToChangeInfo)
  window.removeEventListener('navigate-to-manage-accounts', returnToManageAccounts)
  window.accountData = null as any
})
</script>

<template>
    <div class="OR_menu">
        <h1 class="page-title">校园运动会管理系统</h1>
        <h2 class="page-subtitle">管理员功能菜单</h2>

        <div class="container">
          <!-- 左侧按钮区域 -->
          <div class="button-column left-column">
            <button class="menu-button" @click="showView('view1')">管理账号</button>
            <button class="menu-button" @click="showView('qualificationApproval')">资格审批</button>
            <button class="menu-button" @click="showView('placeApproval')">场地审批</button>
          </div>

          <!-- 中间内容展示区域 -->
          <div class="content-area">
            <!-- 管理账号视图 -->
            <div v-if="currentView === 'view1'" class="content-view">
              <MAAccountManagerMenu
                @manage-accounts="handleManageAccounts"
                @create-account="handleCreateAccount"
                @change-password="handleChangePassword"
              />
            </div>

            <!-- 管理员账号管理视图 -->
            <div v-else-if="currentView === 'manageAccounts'" class="content-view">
              <MAShowInfo />
            </div>

            <!-- 新建管理员账号视图 -->
            <div v-else-if="currentView === 'createAccount'" class="content-view">
              <MACreateAccount />
            </div>

            <!-- 编辑管理员账号视图 -->
            <div v-else-if="currentView === 'changeAccount'" class="content-view">
              <MAChangeInfo />
            </div>

            <!-- 修改密码视图 -->
            <div v-else-if="currentView === 'changePassword'" class="content-view">
              <MAChangePassword />
            </div>

            <!-- 通知管理视图 -->
            <div v-else-if="currentView === 'notificationManage'" class="content-view">
              <MANoticeManagement />
            </div>

            <!-- 资格审批视图 -->
            <div v-else-if="currentView === 'qualificationApproval'" class="content-view">
              <MAQualificationApproval />
            </div>

            <!-- 志愿审批视图 -->
            <div v-else-if="currentView === 'volunteerApproval'" class="content-view">
              <MAVolunteerApproval />
            </div>

            <!-- 场地审批视图 -->
            <div v-else-if="currentView === 'placeApproval'" class="content-view">
              <MAPlaceApproval />
            </div>

            <div v-else class="default-view">
              <h2>欢迎使用管理员管理系统</h2>
              <p>请选择左侧或右侧功能菜单开始操作</p>
              <div class="welcome-features">
                <div class="feature-card">
                  <h3>📊 系统功能</h3>
                  <ul>
                    <li>• 管理用户账号和权限</li>
                    <li>• 审批主办方资格申请</li>
                    <li>• 审批场地使用申请</li>
                    <li>• 发布和管理系统通知</li>
                    <li>• 审批志愿者申请</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧按钮区域 -->
          <div class="button-column right-column">
            <button class="menu-button" @click="showView('notificationManage')">通知管理</button>
            <button class="menu-button" @click="showView('volunteerApproval')">志愿审批</button>
          </div>
        </div>
    </div>
</template>

<style scoped>
.OR_menu {
  width: 100%;
  height: 100%;
}

.page-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #2E7D32;
  text-shadow: 0 0 6px rgba(56, 142, 60, 0.4);
  background: linear-gradient(to right, #2E7D32, #81C784);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: '微软雅黑 Light', sans-serif;
}

.page-subtitle {
  text-align: center;
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0 0 20px 0;
  color: #558B2F;
  font-family: '微软雅黑 Light', sans-serif;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: calc(100vh - 150px);
  gap: 30px;
  padding: 20px;
  box-sizing: border-box;
  min-width: 0;
}

.button-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 15%;
  height: 100%;
  flex-shrink: 0;
  gap: 20px;
}

.left-column {
  align-items: flex-start;
}

.right-column {
  align-items: flex-end;
}

.menu-button {
  width: 100%;
  padding: 20px 15px;
  margin: 0;
  background: linear-gradient(to right, #66BB6A, #43A047);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  font-family: '微软雅黑 Light', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.menu-button:hover {
  background: linear-gradient(to right, #558B2F, #388E3C);
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.content-area {
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #A5D6A7;
  border-radius: 12px;
  padding: 30px;
  box-sizing: border-box;
  min-height: 500px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 0 10px rgba(129, 199, 132, 0.2);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.content-view, .default-view {
  width: 100%;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.content-view h2, .default-view h2 {
  color: #2E7D32;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: bold;
  font-family: '微软雅黑 Light', sans-serif;
}

.content-view p, .default-view p {
  color: #558B2F;
  font-size: 1.2rem;
  line-height: 1.6;
  font-family: '微软雅黑 Light', sans-serif;
}

/* 欢迎页面样式 */
.welcome-features {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.feature-card {
  background: linear-gradient(135deg, #E8F5E8, #C8E6C9);
  border: 1px solid #A5D6A7;
  border-radius: 12px;
  padding: 25px;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-card h3 {
  color: #2E7D32;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.feature-card ul {
  text-align: left;
  color: #558B2F;
  font-size: 1.1rem;
  line-height: 1.8;
}

.feature-card li {
  margin-bottom: 8px;
}
</style>
